<template>
    <div>
<!--        1.返回与搜索-->
        <div>
            <van-row justify="space-between">
                <van-col span="8">
                    <van-nav-bar
                            left-text="返回"
                            left-arrow
                            @click-left="tzback()"
                    />
                </van-col>
                <van-col span="8">
                    <van-nav-bar
                            title="KTV"
                    />
                </van-col>
                <van-col span="8">
                    <van-search shape="round" v-model="value" placeholder="请输入搜索关键词" />
                </van-col>
            </van-row>
        </div>
<!--        2.KTV、按摩选项卡-->
<!--        3.下拉筛选菜单-->
        <div>
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
                <van-dropdown-item v-model="value3" :options="option3" />
            </van-dropdown-menu>
        </div>
<!--        4.list列表【ktv各类门店】-->
        <div>
                <van-card v-for="k in ktvs"
                          :num="k.meter+m4"
                          :price="k.price+m3"
                          :desc="k.des+m1"
                          :title="k.name"
                          :thumb="k.imgurl"
                          :origin-price="k.adress"
                          @click="tzdetail()"
                />
        </div>
    </div>

</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "Ktv",
        data(){
            return{
                ktvs:[],
                m1:"人已消费",
                m3:"起",
                m4:"米",
            }
        },
        mounted(){
            //请求接口，实现查询
            this.axios.get("/api/ktv/query.do").then(res=>{
                if(res.data.code==200){
                    this.ktvs=res.data.data;
                }
            })
        },
        methods: {
            tzback() {
                history.back();
            },
            tzdetail(){
                //跳转页面 传递参数 编程式路由 携带参数
                this.$router.push("/ktvdetail");
            }
        },
        setup() {
            const value1 = ref(0);
            const value2 = ref('a');
            const value3 = ref('a');
            const option1 = [
                { text: '附近', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ];
            const option2 = [
                { text: '排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ];
            const option3 = [
                { text: '筛选', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ];

            return {
                value1,
                value2,
                value3,
                option1,
                option2,
                option3,
            };
        },
    }
</script>

<style scoped>

</style>